<template>
  <div>
    <div class="point" @click="beganDraw">
      <img src="../../assets/images/指针@2x.png" width="100%" />
    </div>
    <div class="bigDraw">
      <canvas
        class="luckydraw"
        ref="luckydraw"
        :width="canvasWidth"
        :height="canvasWidth"
      >
      </canvas>
      <div
        class="litterDot"
        v-for="index in 24"
        :key="index"
        ref="litterDot"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["giftList"], //外部传入奖品列表
  data() {
    return {
      canvasWidth: 0, //动态计算canvas宽高自适应
    };
  },
  created() {
    let clientWidth = document.documentElement.clientWidth;
    let canvasWidth = Math.floor((clientWidth * 473) / 720);
    this.canvasWidth = canvasWidth;
  },
  mounted() {
    let num = this.giftList.length; //商品数量
    let ctxDom = this.$refs.luckydraw;
    // console.log(ctxDom);
    const ctx = ctxDom.getContext("2d");

    //绘制外圈圆并填充颜色
    const r = this.canvasWidth / 2; //r表示圆的半径
    ctx.beginPath();
    ctx.arc(r, r, r, 0, 2 * Math.PI);
    ctx.fillStyle = "#ffbe04";
    ctx.strokeStyle = "transparent";
    ctx.fill();
    ctx.stroke();

    //绘制内圈圆弧
    ctx.beginPath();
    ctx.arc(r, r, r-10, 0, 2 * Math.PI);
    ctx.strokeStyle = "#2d2d2d";
    ctx.stroke();

    //绘制扇形
    let start = -0.5 * Math.PI;
    let end = -0.5 * Math.PI + (Math.PI / num) * 2;
    let step = (Math.PI / num) * 2;
    for (let i = 0; i < 8; i++) {
      ctx.beginPath();
      ctx.moveTo(r, r);
      ctx.arc(r, r, r - 10, start + step * i, end + step * i);
      ctx.lineTo(r, r);
      if (i % 2 == 0) {
        ctx.fillStyle = "#f1f1f1";
      } else {
        ctx.fillStyle = "#ffbe04";
      }
      ctx.fill();
      ctx.closePath();
    }
    this.drawLItterDot(r); //绘制小圆点
    this.drawText(r); //绘制文字
  },
  methods: {
    //绘制小圆点
    drawLItterDot(r) {
      let litterDotArr = this.$refs.litterDot; //小圆点Dom数组
      for (let i = 0; i < 24; i++) {
        litterDotArr[i].setAttribute(
          "style",
          `transform:rotate(${i * 15}deg);transform-origin: 4px ${r - 1}px`
        );
        // litterDotArr[i].style.transform = `rotate(${i * 15}deg)`;
        // litterDotArr[i].style.transform=`transform-origin: 3px ${r}px`;
        if (i % 3 == 0) {
          litterDotArr[i].style.background = "red";
        }
      }
    },
    //绘制大圆盘文字
    drawText(r) {
      let num = this.giftList.length;
      let ctxDom = this.$refs.luckydraw;
      console.log(ctxDom);
      const ctx = ctxDom.getContext("2d");
      ctx.textAlign = "start";
      ctx.textBaseline = "middle";
      ctx.fillStyle = "black";
      // var step = 2*Math.PI/8;
      let step = (Math.PI / num) * 2;
      for (var i = 0; i < num; i++) {
        ctx.save();
        ctx.beginPath();
        ctx.translate(r, r);
        ctx.rotate((i + 0.5) * step);
        ctx.font = " 16px Microsoft YaHei";
        ctx.fillStyle = "black";
        ctx.fillText(this.giftList[i], -30, -r + 30, 60);
        // ctx.font = " 14px Microsoft YaHei";
        // ctx.fillText(this.giftList[i],-30,-95,60);
        ctx.closePath();
        ctx.restore();
      }
    },
    //点击指针开始抽奖
    beganDraw() {
      console.log("点击了canvasLuckyDraw组件中的指针,开始抽奖");
      this.$emit("beganDraw");
    },
  },
};
</script>

<style lang="scss" scoped>
.point {
  position: absolute;
  width: 109px;
  height: 164px;
  top: 50%;
  left: 50%;
  margin-left: -55px;
  margin-top: -100px;
  z-index: 80;
}
.bigDraw {
  width: 100%;
  position: relative;
  .luckydraw {
    display: block;
    margin: 0 auto;
  }
  .litterDot {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    left: 50%;
    margin-left: -7.5px;
    top: 3.5px;
    // box-shadow:0px 0px 15px #333333;
    filter: blur(1px);
  }
}
</style>
